<template>
    <!-- 预约清运 -->
    <div class="appointment">
        <!-- 垃圾清运表单 -->
        <div class="appoint-form">
            <van-form>
                <!-- 商铺信息 -->
                <div class="shoper-name base-row">
                    <div class="label">申请单位</div>
                    <div class="name">万顺私宴</div>
                </div>
                <!-- 联系人 -->
                <div class="shoper-contact base-row">
                    <div class="label">联系人</div>
                    <div class="name">罗玲虹</div>
                </div>
                <!-- 垃圾类型 -->
                <div class="rubbish-type base-row">
                    <div class="label">垃圾类型</div>
                    <div class="name" @click="showRubbish = true">
                        <div class="picker-text">
                            {{ form.rubbishType ? form.rubbishType : '请选择' }}
                        </div>
                        <img :src="arrow" alt="">
                    </div>
                </div>
                <!-- 垃圾数量 -->
                <div class="rubbish-count base-row">
                    <div class="label">垃圾数量</div>
                    <div class="name">
                        <div class="input">
                            <van-field v-model="value" type="number" class="count" />
                        </div>
                        <span>桶</span>
                    </div>

                </div>
                <!-- 时间 -->
                <div class="time base-row">
                    <div class="label">预约时间</div>
                    <div class="name" @click="showTime = true">
                        <div class="picker-text">
                            {{ form.time ? form.time : '请选择' }}
                        </div>
                        <img :src="arrow" alt="">
                    </div>
                </div>
            </van-form>
            <!-- 按钮 -->
            <div class="appoint-btn">
                <!-- 重置 -->
                <div class="reset-btn btn">重置</div>
                <!-- 提交 -->
                <div class="submit-btn btn" @click="submit">提交订单</div>
            </div>
        </div>
        <!-- 清运的列表 -->
        <div class="appoint-wrap">
            <!-- title -->
            <div class="header-box">
                <div class="title">订单列表</div>
                <div class="dropDown-wrap">
                    <van-dropdown-menu>
                        <van-dropdown-item teleport="body" title="日期" v-model="dropDown.time"
                            :options="rubbishColumns" />
                        <van-dropdown-item teleport="body" title="垃圾类型" v-model="dropDown.type"
                            :options="rubbishColumns" />
                        <van-dropdown-item teleport="body" title="订单状态" v-model="dropDown.status"
                            :options="rubbishColumns" />
                    </van-dropdown-menu>
                </div>
            </div>
            <!-- 下拉列表 -->
            <div class="appoint-list">
                <div class="appoint-item" v-for="(item, index) in appointList" :key="item.id">
                    <div class="appoint-content">
                        <div class="appoint-title">
                            <div class="left-box">
                                <div class="title-box">
                                    <div style="margin-right: 8px;">{{ index + 1 }}.</div>
                                    <div>订单状态:</div>
                                </div>
                                <div class="status">
                                    未接单
                                </div>
                            </div>
                            <div class="right-box">
                                <div class="more-text" @click="showMore(index)">
                                    更多
                                </div>
                                <img :src="item.open ? uparrow : arrow" alt="">
                            </div>

                        </div>
                        <div class="appoint-row">
                            <div class="label">预约清运时间:</div>
                            <div class="value">{{ item.appointTime }}</div>
                        </div>
                        <div class="appoint-row">
                            <div class="label">申请时间:</div>
                            <div class="value">{{ item.applyTime }}</div>
                        </div>
                        <div class="appoint-row">
                            <div class="label">垃圾类型:</div>
                            <div class="value">{{ item.rubbishType }} </div>
                        </div>
                        <div class="appoint-row">
                            <div class="label">垃圾数量:</div>
                            <div class="value">{{ item.rubbishCount }}</div>
                        </div>
                        <div v-show="item.open">
                            <div class="appoint-row">
                                <div class="label"> 车牌号:</div>
                                <div class="value">{{ item.carNumber }}</div>
                            </div>
                            <div class="appoint-row">
                                <div class="label"> 实际清运时间:</div>
                                <div class="value">{{ item.acturalTime }}</div>
                            </div>
                            <div class="appoint-row">
                                <div class="label"> 实际清运桶数: </div>
                                <div class="value">{{ item.acturalCount }} </div>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 垃圾类型选择器 -->
    <van-popup teleport="body" v-model:show="showRubbish" position="bottom">
        <van-picker :columns="rubbishColumns" @confirm="onRubbish" @cancel="showRubbish = false" />
    </van-popup>
    <!-- 时间选择器 -->
    <timePicker @changeValue="showTime = false" :showPicker="showTime" @confirm="onTime" />


</template>

<script setup>
import timePicker from "@/components/timePicker.vue"
import arrow from "@/assets/images/bottomarrow.png"
import uparrow from "@/assets/images/uparrow.png"
import { ref, reactive } from "vue"

const showMore = (index) => {
    appointList.value[index].open = !appointList.value[index].open
}


const form = reactive({
    rubbishType: '',
    count: "",
    time: "",
})
// 垃圾类型
const showRubbish = ref(false);
const rubbishColumns = [
    { text: '湿垃圾', value: '湿垃圾' },
    { text: '干垃圾', value: '干垃圾' },
    { text: '餐厨垃圾', value: '餐厨垃圾' },
];
const onRubbish = ({ selectedOptions }) => {
    form.rubbishType = selectedOptions[0]?.text;
    showRubbish.value = false;
};
// 时间选择
const showTime = ref(false);
const onTime = (selectedValues) => {
    form.time = selectedValues;
    showTime.value = false;
};

// 列表筛选
const dropDown = reactive({
    time: [],
    type: "",
    status: ""
})
// 订单状态
const statusColumns = [
    { text: '湿垃圾', value: '湿垃圾' },
    { text: '干垃圾', value: '干垃圾' },
    { text: '餐厨垃圾', value: '餐厨垃圾' },
];
const appointList = ref([
    {
        id: 1,
        status: 0,
        appointTime: "2024-08-12  15:00",
        applyTime: "2024-08-12  15:00",
        rubbishType: "湿垃圾",
        rubbishCount: "0.01桶",
        carNumber: "沪DB9588",
        acturalTime: "2024-08-12 15:00",
        acturalCount: "0.01桶",
        open: false,
    },
    {
        id: 2,
        status: 0,
        appointTime: "2024-08-12  15:00",
        applyTime: "2024-08-12  15:00",
        rubbishType: "湿垃圾",
        rubbishCount: "0.01桶",
        carNumber: "沪DB9588",
        acturalTime: "2024-08-12 15:00",
        acturalCount: "0.01桶",
        open: false,
    }
])
</script>

<style lang="scss" scoped>
::v-deep(.van-dropdown-menu__bar) {
    height: unset;
    background: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;

}

::v-deep(.van-dropdown-menu__title) {
    font-size: 28px;
    color: rgba(128, 128, 128, 1);
}


.appointment {

    height: calc(100vh - 226px - 88px - 16px);
    overflow-y: scroll;

    .appoint-form {
        padding: 0 30px;
        box-sizing: border-box;
        margin-top: 16px;
        height: 580px;
        opacity: 1;
        border-radius: 30px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

        .base-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 88px;
            box-shadow: inset 0px -2px 0px rgba(239, 239, 239, 1);
            font-size: 26px;
        }

        .rubbish-type,
        .time {
            .name {
                display: flex;
                align-items: center;

                .picker-text {
                    font-size: 26px;
                    color: rgba(193, 193, 193, 1);
                }

                img {
                    margin: 2px 0 0 6px;
                    width: 18px;
                    height: 10px;
                }
            }
        }

        .rubbish-count {
            .name {
                display: flex;
                align-items: center;

                .input {
                    margin-right: 10px;
                    width: 82px;
                    // height: 28px;
                    background: rgba(255, 255, 255, 1);
                    border: 1px solid rgba(193, 193, 193, 1);

                }
            }


        }

        .appoint-btn {
            margin-top: 40px;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .reset-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 142px;
                height: 76px;
                border-radius: 50px;
                font-size: 28px;
                color: rgba(166, 166, 166, 1);
                background: rgba(255, 255, 255, 1);
                border: 1px solid rgba(221, 221, 221, 1);
            }

            .submit-btn {
                margin-left: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200px;
                height: 76px;
                border-radius: 50px;
                font-size: 28px;
                color: rgba(255, 255, 255, 1);
                background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%),
                    linear-gradient(90deg, rgba(47, 135, 229, 1) 0%, rgba(97, 184, 246, 1) 100%);
            }

            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
            }

        }

    }

    .appoint-wrap {
        padding: 40px 24px;
        box-sizing: border-box;
        border-radius: 30px 30px 0px 0px;
        background: linear-gradient(180deg, rgba(241, 248, 255, 1) 0%, rgba(241, 248, 255, 0) 100%);

        .header-box {
            display: flex;
            justify-content: space-between;
            font-size: 30px;
            height: 80px;

            .title {
                width:20%;
            }

            .dropDown-wrap {
                width: 70%;
            }
        }

        .appoint-list {
            // width: 702px;
            padding: 20px 24px 0 24px;
            box-sizing: border-box;
            // opacity: 1;
            border-radius: 30px 30px 0px 0px;
            background: rgba(255, 255, 255, 1);

            .appoint-item {

                .appoint-content {
                    .appoint-title {
                        margin-bottom: 30px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .left-box {
                            display: flex;
                            font-size: 28px;
                            color: black;

                            .title-box {

                                width: 182px;
                                display: flex;
                                justify-content: flex-end;
                                align-items: center;
                            }

                            .status {
                                margin-left: 20px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 108px;
                                height: 48px;
                                font-size: 24px;
                                color: rgba(255, 255, 255, 1);
                                background: rgba(197, 207, 224, 1);

                            }
                        }

                        .right-box {
                            display: flex;
                            align-items: center;

                            .more-text {
                                font-size: 24px;
                                color: rgba(166, 166, 166, 1);

                            }

                            img {
                                margin: 1px 0 0 3px;
                                width: 18px;
                                height: 10px;
                            }
                        }
                    }

                    .appoint-row {
                        margin-bottom: 18px;
                        display: flex;
                        align-items: center;

                        .label {
                            font-size: 26px;
                            color: rgba(128, 128, 128, 1);
                            text-align: right;
                            width: 182px;
                        }

                        .value {
                            margin-left: 20px;
                            font-size: 26px;
                            color: rgba(51, 51, 51, 1);
                        }
                    }
                }

                .line {
                    background: rgba(166, 166, 166, 0.3);
                    height: 1px;
                    width: 100%;
                    margin-bottom: 20px;
                }
            }
        }


    }


}

::v-deep(.van-cell) {
    padding: 0 2px !important;
}
</style>